<route lang="json5">
{
  path: '/services',
  meta: {
    title: '服务项目',
    layout: 'pc-default',
  },
}
</route>

<template>
  <div class="services-page">
    <!-- Banner Section -->
    <section class="page-banner">
      <div class="container-box">
        <h1 class="banner-title">服务项目</h1>
        <p class="banner-subtitle">为建筑行业提供全方位专业服务</p>
      </div>
    </section>

    <!-- Services Overview -->
    <section class="services-overview">
      <div class="container-box">
        <div class="overview-content">
          <h2 class="section-title">我们的专业服务</h2>
          <p class="overview-description">
            山东滨建工程技术服务有限公司致力于为建筑行业提供全方位、专业化的技术服务。
            我们的服务涵盖工程咨询、技能培训、资格认证、质量检测等多个领域，
            助力企业提升技术水平和管理能力。
          </p>
        </div>

        <div class="services-stats">
          <div class="stat-item">
            <div class="stat-number">4</div>
            <div class="stat-label">大类服务</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">20+</div>
            <div class="stat-label">细分项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">500+</div>
            <div class="stat-label">服务客户</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Main Services -->
    <section class="main-services">
      <div class="container-box">
        <div class="services-grid">
          <div
            v-for="service in mainServices"
            :key="service.id"
            class="service-card"
            @click="showServiceDetail(service)"
          >
            <div class="service-header">
              <div class="service-icon">
                <el-icon :size="50">
                  <component :is="service.icon" />
                </el-icon>
              </div>
              <div class="service-badge">{{ service.badge }}</div>
            </div>

            <div class="service-content">
              <h3 class="service-title">{{ service.title }}</h3>
              <p class="service-description">{{ service.description }}</p>

              <div class="service-features">
                <div class="features-title">主要服务：</div>
                <ul class="features-list">
                  <li v-for="feature in service.features" :key="feature">
                    <el-icon size="14"><Check /></el-icon>
                    <span>{{ feature }}</span>
                  </li>
                </ul>
              </div>

              <div class="service-advantages">
                <div class="advantages-title">服务优势：</div>
                <div class="advantages-tags">
                  <el-tag
                    v-for="advantage in service.advantages"
                    :key="advantage"
                    type="success"
                    size="small"
                  >
                    {{ advantage }}
                  </el-tag>
                </div>
              </div>
            </div>

            <div class="service-footer">
              <el-button type="primary" class="service-btn"> 了解详情 </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Process Section -->
    <section class="process-section">
      <div class="container-box">
        <h2 class="section-title text-center">服务流程</h2>
        <div class="process-timeline">
          <div v-for="(step, index) in serviceProcess" :key="step.id" class="process-step">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-description">{{ step.description }}</p>
            </div>
            <div v-if="index < serviceProcess.length - 1" class="step-connector"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Why Choose Us -->
    <section class="why-choose-section">
      <div class="container-box">
        <h2 class="section-title text-center">为什么选择我们</h2>
        <div class="choose-grid">
          <div v-for="reason in chooseReasons" :key="reason.id" class="choose-item">
            <div class="choose-icon">
              <el-icon :size="40">
                <component :is="reason.icon" />
              </el-icon>
            </div>
            <h3 class="choose-title">{{ reason.title }}</h3>
            <p class="choose-description">{{ reason.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact CTA -->
    <section class="cta-section">
      <div class="container-box">
        <div class="cta-content">
          <h2 class="cta-title">需要我们的专业服务？</h2>
          <p class="cta-description">立即联系我们，获取定制化的解决方案</p>
          <div class="cta-actions">
            <el-button type="primary" size="large" @click="router.push('/contact')">
              立即咨询
            </el-button>
            <el-button size="large" @click="showQuickContact = true"> 快速联系 </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- Service Detail Modal -->
    <el-dialog
      v-model="serviceDetailVisible"
      :title="selectedService?.title"
      width="800px"
      class="service-detail-dialog"
    >
      <div v-if="selectedService" class="service-detail-content">
        <div class="detail-header">
          <div class="detail-icon">
            <el-icon :size="60">
              <component :is="selectedService.icon" />
            </el-icon>
          </div>
          <div class="detail-info">
            <h3>{{ selectedService.title }}</h3>
            <p>{{ selectedService.description }}</p>
          </div>
        </div>

        <div class="detail-body">
          <h4>详细服务内容：</h4>
          <ul class="detail-features">
            <li v-for="feature in selectedService.detailFeatures" :key="feature">
              {{ feature }}
            </li>
          </ul>

          <h4>适用范围：</h4>
          <p>{{ selectedService.scope }}</p>

          <h4>服务周期：</h4>
          <p>{{ selectedService.duration }}</p>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="serviceDetailVisible = false">关闭</el-button>
          <el-button type="primary" @click="router.push('/contact')"> 立即咨询 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Quick Contact Modal -->
    <el-dialog v-model="showQuickContact" title="快速联系" width="500px">
      <div class="quick-contact-content">
        <div class="contact-methods">
          <div class="contact-method">
            <el-icon size="24"><Phone /></el-icon>
            <div>
              <strong>电话咨询</strong>
              <p><a href="tel:18954338600">18954338600（曹老师）</a></p>
            </div>
          </div>

          <div class="contact-method">
            <el-icon size="24"><Message /></el-icon>
            <div>
              <strong>邮箱咨询</strong>
              <p>binjianjifu@163.com</p>
            </div>
          </div>

          <div class="contact-method">
            <el-icon size="24"><Location /></el-icon>
            <div>
              <strong>实地咨询</strong>
              <p>山东省滨州市北外环与渤海二十一路交叉口，向南100米路东</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import {
    Tools,
    School,
    Document,
    Trophy,
    Check,
    Phone,
    Message,
    Location,
    Star,
    Shield,
    Timer,
    TrendCharts,
  } from '@element-plus/icons-vue';

  const router = useRouter();

  // 响应式状态
  const serviceDetailVisible = ref(false);
  const showQuickContact = ref(false);
  const selectedService = ref(null);

  // 主要服务
  const mainServices = [
    {
      id: 1,
      title: '工程咨询',
      icon: 'Tools',
      badge: '专业咨询',
      description: '提供全面的工程技术咨询服务，为项目提供专业指导和技术支持',
      features: ['工程技术咨询', '项目可行性研究', '工程方案设计', '技术方案论证', '工程质量评估'],
      advantages: ['经验丰富', '技术先进', '服务及时'],
      detailFeatures: [
        '建筑工程技术咨询和指导',
        '工程项目可行性研究报告编制',
        '建筑方案设计和技术论证',
        '施工工艺和技术方案优化',
        '工程质量问题诊断和整改建议',
        '新材料新技术应用推广',
      ],
      scope: '适用于各类建筑工程项目，包括住宅、商业、工业建筑等',
      duration: '根据项目复杂程度，一般为1-6个月',
    },
    {
      id: 2,
      title: '技能培训',
      icon: 'School',
      badge: '专业培训',
      description: '开展各类建筑技能培训，提升从业人员专业水平和实操能力',
      features: [
        '建筑工人技能培训',
        '安全生产培训',
        '新技术推广培训',
        '管理人员培训',
        '考试辅导培训',
      ],
      advantages: ['师资强大', '设施完善', '通过率高'],
      detailFeatures: [
        '建筑工人基础技能和专项技能培训',
        '安全生产教育和安全操作规程培训',
        '新工艺、新技术、新材料应用培训',
        '项目管理人员专业能力提升培训',
        '各类资格考试考前辅导和模拟训练',
      ],
      scope: '面向建筑企业员工、个人学员、在职人员等',
      duration: '培训周期灵活，从几天到几个月不等',
    },
    {
      id: 3,
      title: '资格认证',
      icon: 'Document',
      badge: '权威认证',
      description: '协助办理各类建筑行业资格证书，提供认证咨询和代办服务',
      features: [
        '建筑工人证书申报',
        '技能等级认定',
        '特种作业证办理',
        '继续教育服务',
        '证书年审代办',
      ],
      advantages: ['流程简化', '效率高', '通过率好'],
      detailFeatures: [
        '建筑工人职业技能岗位证书申报',
        '建筑技能人员技能等级认定',
        '特种作业人员操作证书办理',
        '专业技术人员继续教育服务',
        '各类证书到期换证和年审服务',
      ],
      scope: '服务于需要资格认证的建筑从业人员',
      duration: '办证周期一般为15-45个工作日',
    },
    {
      id: 4,
      title: '质量检测',
      icon: 'Trophy',
      badge: '权威检测',
      description: '提供专业的工程质量检测和评估服务，确保工程质量安全',
      features: ['工程质量检测', '安全隐患排查', '合规性审查', '第三方评估', '技术鉴定服务'],
      advantages: ['设备先进', '标准严格', '报告权威'],
      detailFeatures: [
        '建筑工程质量检测和验收',
        '施工现场安全隐患排查和整改',
        '工程合规性和标准符合性审查',
        '第三方独立质量评估和监督',
        '工程技术争议鉴定和咨询服务',
      ],
      scope: '适用于各类在建和既有建筑工程项目',
      duration: '检测周期根据项目规模，一般为3-15个工作日',
    },
  ];

  // 服务流程
  const serviceProcess = [
    {
      id: 1,
      title: '需求咨询',
      description: '客户提出服务需求，我们进行初步咨询和需求分析',
    },
    {
      id: 2,
      title: '方案制定',
      description: '根据客户需求制定详细的服务方案和实施计划',
    },
    {
      id: 3,
      title: '合同签订',
      description: '确定服务内容和费用，签订正式服务合同',
    },
    {
      id: 4,
      title: '服务实施',
      description: '按照约定的方案和时间节点开展专业服务',
    },
    {
      id: 5,
      title: '质量验收',
      description: '服务完成后进行质量检查和客户验收',
    },
    {
      id: 6,
      title: '后续支持',
      description: '提供必要的后续技术支持和咨询服务',
    },
  ];

  // 选择我们的理由
  const chooseReasons = [
    {
      id: 1,
      title: '专业团队',
      icon: 'Star',
      description: '拥有经验丰富的专业技术团队，具备深厚的理论基础和实践经验',
    },
    {
      id: 2,
      title: '服务保障',
      icon: 'Shield',
      description: '完善的服务体系和质量保障机制，确保服务质量和客户满意度',
    },
    {
      id: 3,
      title: '响应及时',
      icon: 'Timer',
      description: '建立了快速响应机制，能够及时处理客户需求和突发问题',
    },
    {
      id: 4,
      title: '持续创新',
      icon: 'TrendCharts',
      description: '持续关注行业发展趋势，不断引进新技术、新工艺、新标准',
    },
  ];

  // 显示服务详情
  const showServiceDetail = (service) => {
    selectedService.value = service;
    serviceDetailVisible.value = true;
  };
</script>

<style lang="scss" scoped>
  .services-page {
    min-height: 100vh;
  }

  // Page Banner
  .page-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;

    .banner-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .banner-subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
    }
  }

  // Services Overview
  .services-overview {
    padding: 80px 0;
    background: #f8f9fa;

    .overview-content {
      text-align: center;
      margin-bottom: 60px;

      .section-title {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 20px;
      }

      .overview-description {
        font-size: 1.1rem;
        color: #666;
        line-height: 1.8;
        max-width: 800px;
        margin: 0 auto;
      }
    }

    .services-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      text-align: center;

      .stat-item {
        .stat-number {
          font-size: 2.5rem;
          font-weight: 700;
          color: var(--el-color-primary);
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 1.1rem;
          color: #666;
        }
      }
    }
  }

  // Main Services
  .main-services {
    padding: 100px 0;

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
    }

    .service-card {
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 20px;
      padding: 40px 30px;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        transform: translateY(-8px);
      }

      .service-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;

        .service-icon {
          color: var(--el-color-primary);
        }

        .service-badge {
          background: var(--el-color-primary);
          color: white;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
        }
      }

      .service-content {
        margin-bottom: 30px;

        .service-title {
          font-size: 1.5rem;
          color: #2c3e50;
          margin-bottom: 12px;
        }

        .service-description {
          color: #666;
          line-height: 1.6;
          margin-bottom: 20px;
        }

        .service-features {
          margin-bottom: 20px;

          .features-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
          }

          .features-list {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 4px;
              color: #555;
              font-size: 14px;

              .el-icon {
                color: var(--el-color-success);
              }
            }
          }
        }

        .service-advantages {
          .advantages-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
          }

          .advantages-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
        }
      }

      .service-footer {
        .service-btn {
          width: 100%;
          height: 40px;
        }
      }
    }
  }

  // Process Section
  .process-section {
    padding: 100px 0;
    background: #f8f9fa;

    .process-timeline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 60px;

      @media (min-width: 1200px) {
        grid-template-columns: repeat(6, 1fr);
      }
    }

    .process-step {
      position: relative;
      text-align: center;

      .step-number {
        width: 60px;
        height: 60px;
        background: var(--el-color-primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 auto 20px;
      }

      .step-content {
        .step-title {
          font-size: 1.2rem;
          color: #2c3e50;
          margin-bottom: 8px;
        }

        .step-description {
          color: #666;
          font-size: 14px;
          line-height: 1.6;
        }
      }

      .step-connector {
        position: absolute;
        top: 30px;
        right: -15px;
        width: 30px;
        height: 2px;
        background: var(--el-color-primary-light-5);

        @media (max-width: 1199px) {
          display: none;
        }
      }

      &:last-child .step-connector {
        display: none;
      }
    }
  }

  // Why Choose Section
  .why-choose-section {
    padding: 100px 0;

    .choose-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      margin-top: 60px;
    }

    .choose-item {
      text-align: center;
      padding: 40px 20px;
      background: white;
      border: 1px solid #e9ecef;
      border-radius: 16px;
      transition: all 0.3s;

      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-8px);
      }

      .choose-icon {
        color: var(--el-color-primary);
        margin-bottom: 20px;
      }

      .choose-title {
        font-size: 1.3rem;
        color: #2c3e50;
        margin-bottom: 12px;
      }

      .choose-description {
        color: #666;
        line-height: 1.6;
      }
    }
  }

  // CTA Section
  .cta-section {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 100px 0;
    text-align: center;

    .cta-title {
      font-size: 2.5rem;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .cta-description {
      font-size: 1.2rem;
      margin-bottom: 40px;
      opacity: 0.9;
    }

    .cta-actions {
      display: flex;
      gap: 16px;
      justify-content: center;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
      }

      .el-button {
        height: 48px;
        padding: 0 32px;
        font-size: 16px;
      }
    }
  }

  // Dialog styles
  .service-detail-dialog {
    .detail-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 30px;

      .detail-icon {
        color: var(--el-color-primary);
      }

      .detail-info h3 {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 8px;
      }

      .detail-info p {
        color: #666;
        margin: 0;
      }
    }

    .detail-body {
      h4 {
        color: #2c3e50;
        margin: 20px 0 10px;
      }

      .detail-features {
        list-style-type: disc;
        margin-left: 20px;

        li {
          margin-bottom: 8px;
          color: #555;
        }
      }

      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }

  .quick-contact-content {
    .contact-methods {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .contact-method {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px;
      border: 1px solid #e9ecef;
      border-radius: 8px;

      .el-icon {
        color: var(--el-color-primary);
        margin-top: 2px;
      }

      strong {
        display: block;
        margin-bottom: 4px;
        color: #2c3e50;
      }

      p {
        margin: 0;
        color: #666;

        a {
          color: var(--el-color-primary);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  // Common styles
  .section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;

    &.text-center {
      text-align: center;
    }
  }
</style>
